<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body,
        div,
        ul,
        li {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style-type: none;
        }

        body {
            background: #000;
            text-align: center;
            font: 12px/20px "微软雅黑";
        }

        #box {
            position: relative;
            width: 492px;
            height: 172px;
            background: #fff;
            border-radius: 5px;
            border: 8px solid #fff;
            margin: 10px auto;
        }

        #box .list {
            position: relative;
            width: 490px;
            height: 170px;
            overflow: hidden;
            border: 1px solid #ccc;
        }

        #box .list li {
            position: absolute;
            top: 0;
            left: 0;
            width: 490px;
            height: 170px;
            opacity: 0;
           
        }

        #box .list li.now {
            opacity: 1;
          
        }

        #box .count {
            position: absolute;
            right: 0;
            bottom: 5px;
        }

        #box .count li {
            color: #fff;
            float: left;
            width: 20px;
            height: 20px;
            cursor: pointer;
            margin-right: 5px;
            overflow: hidden;
            background: #F90;
            opacity: 0.7;
           
            border-radius: 20px;
        }

        #box .count li.now {
            color: #fff;
            opacity: 1;
          
            font-weight: 700;
            background: #f60;
        }

        #tmp {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
    <script>
        window.onload = function(){
            var box = document.getElementById("box");
            var ul = document.getElementsByTagName("ul");
            var imgs = ul[0].getElementsByTagName("li");
            var num = ul[1].getElementsByTagName("li");
            var timer = play = null;
            var i = index = 0;
            var flag = true;
            //切换按钮
            for(i = 0; i < num.length;i++){
                num[i].index = i;
                num[i].onmouseover = function(){
                    show(this.index);
                }
            }
            //鼠标滑过关闭定时器
            box.onmouseover = function(){
                clearInterval(play);
            };
            //鼠标离开时自动播放
            box.onmouseout = function(){
                autoPlay();
            };
            //自动播放函数
            function autoPlay(){
                play = setInterval(function(){
                    //判断播放顺序
                    flag ? index++ : index--;
                    //正序
                    index >= imgs.length && (index = imgs.length - 2,flag = false);
                    //倒序
                    index <= 0 && (index = 0, flag = true);
                    //函数调用
                    show(index);
                },2000)
            }
            autoPlay();
            //图片淡入淡出切换
            function show(c){
                index = c;
                var opacity = 0;
                for(i = 0; i < num.length;i++)num[i].className = '';
                num[index].className = 'now';
                clearInterval(timer);
                for(i = 0; i < imgs.length;i++){
                    imgs[i].style.opacity = 0;
                }
                timer = setInterval(function(){
                    opacity += 2;
                    opacity > 100 && (opacity=100);
                    imgs[index].style.opacity = opacity / 100;
                    opacity == 100 && clearInterval(timer);
                },20)
            }
        }
     
    </script>
</head>

<body>
    <div id="box">
        <ul class="list">
            <li class="now"><img src="img/01.jpg" width="490" height="170" /></li>
            <li><img src="img/02.jpg" width="490" height="170" /></li>
            <li><img src="img/03.jpg" width="490" height="170" /></li>
            <li><img src="img/04.jpg" width="490" height="170" /></li>
            <li><img src="img/05.jpg" width="490" height="170" /></li>
        </ul>
        <ul class="count">
            <li class="now">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>

</body>

</html>